<template>
  <div class="dispatch">
    <div class="type_item">
      <div class="innerLayer NoTime" @click="goDispatchList(1, 'Nopunctual')">
        <span class="number"> {{ NoTime ? NoTime : '0' }}</span>
        <!-- <span class="number">400</span> -->
        <span class="title">超时未启动</span>
      </div>
      <div class="innerLayer Run_timeout" @click="goDispatchList(8, 'Step_Run_timeout')">
        <span class="number"> {{ StepTimeout ? StepTimeout : '0' }}</span>
        <!-- <span class="number">400</span> -->
        <span class="title">步骤运行超时</span>
      </div>
      <div class="innerLayer overTime" @click="goDispatchList(2, 'Timeout_out_over')">
        <span class="number"> {{ overTime ? overTime : '0' }}</span>
        <!-- <span class="number">400</span> -->
        <span class="title">超时未结束</span>
      </div>
      <div class="innerLayer CurrentError" @click="goDispatchList(3, 'CurrentError')">
        <span class="number"> {{ CurrentError ? CurrentError : '0' }}</span>
        <!-- <span class="number">400</span> -->
        <span class="title">当前报错系统</span>
      </div>
    </div>
    <div class="textPrompt">
      <span>批量调度-日终统计</span>
      <div class="Prompt_time">({{ Prompt_time }})</div>
      <!-- <span>批量调度-日终统计</span><span>({{ JudgeTime }})</span> -->
    </div>
    <footer>
      <div
        class="situation"
        style="background: rgba(70, 84, 93, 0.1)"
        @click="goDispatchList(5, 'startover')"
      >
        <span class="title_tip" style="color: #46545d">待启动</span>
        <span class="Num" style="color: #46545d">{{ startover ? startover : '0' }}</span>
      </div>
      <div
        class="situation"
        style="background: rgba(0, 122, 245, 0.1)"
        @click="goDispatchList(4, 'InOperation')"
      >
        <span class="title_tip" style="color: #007af5">运行中</span>
        <span class="Num" style="color: #007af5">{{ InOperation ? InOperation : '0' }}</span>
      </div>
      <div
        class="situation"
        style="background: rgba(39, 215, 176, 0.1)"
        @click="goDispatchList(6, 'complete')"
      >
        <span class="title_tip" style="color: #27d7b0">已完成</span>
        <span class="Num" style="color: #27d7b0">{{ complete ? complete : '0' }}</span>
      </div>
      <div
        class="situation_bottom"
        style="background: rgba(236, 166, 74, 0.1)"
        @click="goDispatchList(9, 'Accumulated_timeout')"
      >
        <span class="title_tip" style="color: #f7aa58">超时累计</span>
        <span class="Num" style="color: #f7aa58">{{
          TimeoutAccumulation ? TimeoutAccumulation : '0'
        }}</span>
      </div>
      <div
        class="situation_bottom"
        style="background: rgba(170, 95, 255, 0.1)"
        @click="goDispatchList(7, 'Cumulative_error')"
      >
        <span class="title_tip" style="color: #aa5fff">报错累计</span>
        <span class="Num" style="color: #aa5fff">{{
          Cumulative_error ? Cumulative_error : '0'
        }}</span>
      </div>
    </footer>
  </div></template
>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { getToken, statisticsIndicates } from '@/http/api/dispatch/batch_scheduling_api';
  // const emit = defineEmits(['changeTime']);
  const props = defineProps({
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const router = useRouter();
  const current_time = ref(
    new Date().getFullYear() +
      '-' +
      (new Date().getMonth() >= 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)) +
      '-' +
      (new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate())
  );
  const token = ref('');
  const twelveTime = ref(12 * 60 * 60);
  const Prompt_time = ref('');
  const InOperation = ref(''); // 运行中
  const NoTime = ref(''); // 未按时启动
  const overTime = ref(''); //超时未结束
  const CurrentError = ref(''); // 当前报错
  const startover = ref(''); // 待启动
  const complete = ref(''); // 已完成
  const Cumulative_error = ref(''); // 累计报错
  const StepTimeout = ref(''); // 步骤超时
  const TimeoutAccumulation = ref(''); // 超时累计
  onMounted(() => {
    JudgeTime();
    getToken_Count();
  });
  const JudgeTime = () => {
    let date = new Date();
    let obj = date.getHours() * 60 * 60 + date.getMinutes() * 60 + date.getSeconds();

    if (obj > twelveTime.value) {
      let time = ref(date.getTime() + 24 * 60 * 60 * 1000); // 后一天
      let yesday = ref(new Date(time.value));
      yesday.value =
        yesday.value.getFullYear() +
        '-' +
        (yesday.value.getMonth() >= 9
          ? yesday.value.getMonth() + 1
          : '0' + (yesday.value.getMonth() + 1)) +
        '-' +
        (yesday.value.getDate() > 9 ? yesday.value.getDate() : '0' + yesday.value.getDate());
      Prompt_time.value = current_time.value + ' 12:00' + '~' + yesday.value + ' 12:00';
      return Prompt_time;
    } else {
      let time = date.getTime() - 24 * 60 * 60 * 1000; //前一天
      let yesday = new Date(time);
      yesday =
        yesday.getFullYear() +
        '-' +
        (yesday.getMonth() >= 9 ? yesday.getMonth() + 1 : '0' + (yesday.getMonth() + 1)) +
        '-' +
        (yesday.getDate() > 9 ? yesday.getDate() : '0' + yesday.getDate());
      Prompt_time.value = yesday + ' 12:00' + '~' + current_time.value + ' 12:00';
      return Prompt_time;
    }
  };
  const getToken_Count = () => {
    getToken().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.data.msg,
          type: 'error'
        });
        return;
      }
      token.value = res.data.data.token;
      statis_InOperation('运行中', Prompt_time.value);
      statis_NoTime('未按时启动', '');
      statis_overTime('超时未结束', '');
      statis_CurrentError('当前报错', '');
      statis_waitingStart('待启动', Prompt_time.value);
      statis_complete('已完成', Prompt_time.value);
      statis_Cumulative_error('累计报错', Prompt_time.value);
      statis_StepTimeout('步骤超时', '');
      statis_TimeoutAccumulation('超时累计', Prompt_time.value);
    });
  };
  const statis_StepTimeout = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      StepTimeout.value = res.data.data.count;
    });
  };
  const statis_TimeoutAccumulation = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      TimeoutAccumulation.value = res.data.data.count;
    });
  };
  const statis_NoTime = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      NoTime.value = res.data.data.count;
    });

    //
  };
  const statis_InOperation = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      InOperation.value = res.data.data.count;
    });

    //
  };
  const statis_overTime = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // state = res.data.count;
      overTime.value = res.data.data.count;
      // return count;
      //return resolve(count)
    });

    //
  };
  const statis_CurrentError = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // state = res.data.count;
      CurrentError.value = res.data.data.count;
      // return count;
      //return resolve(count)
    });

    //
  };
  const statis_waitingStart = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // state = res.data.count;
      startover.value = res.data.data.count;
      // return count;
      //return resolve(count)
    });

    //
  };
  const statis_complete = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // state = res.data.count;
      complete.value = res.data.data.count;
      // return count;
      //return resolve(count)
    });

    //
  };
  const statis_Cumulative_error = (type, time) => {
    let params = {
      type: type,
      timeRange: time,
      token: token.value
    };
    statisticsIndicates(params).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // state = res.data.count;
      Cumulative_error.value = res.data.data.count;
      // return count;
      //return resolve(count)
    });

    //
  };
  const goDispatchList = (type: number, status: striing) => {
    router.push({
      name: status
    });
    // ElMessage({
    //   showClose: true,
    //   message: '该功能完善中',
    //   type: 'warning'
    // });
  };
  watch(
    () => props.changeTime,
    () => {
      JudgeTime();
      getToken_Count();
    }
  );
</script>
<style scoped lang="less">
  .dispatch {
    .type_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*  height: 50%; */
      margin-bottom: 15px;
      box-sizing: border-box;
      .innerLayer {
        width: 110px;
        height: 110px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        .number {
          font-size: 20px;
          font-weight: bold;
          color: #46545d;
          text-align: center;
        }
        .title {
          font-size: 12px;
          font-weight: 400;
          color: #46545d;
          line-height: 20px;
        }
        &.NoTime {
          border: 12px solid #aa5fff;
        }
        &.Run_timeout {
          border: 12px solid #f7aa58;
        }
        &.overTime {
          border: 12px solid #fc6f5e;
        }
        &.CurrentError {
          border: 12px solid #ffbb37;
        }
      }
    }
    .textPrompt {
      height: 15%;
      display: flex;
      flex-direction: column;
      span {
        font-size: 16px;
        font-weight: bold;
        color: #46545d;
      }
      .Prompt_time {
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #46545d;
      }
    }
    footer {
      display: flex;
      justify-content: space-between;
      /* align-items: space-between; */
      flex-wrap: wrap;
      height: calc(85% - 125px);
      box-sizing: border-box;
      .situation {
        width: 32%;
        height: 48%;
        cursor: pointer;
        border-radius: 6px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .Num {
          font-size: 16px;
          font-weight: bold;
          /*   float: right; */
        }
        .title_tip {
          font-size: 14px;
          font-weight: 400;
        }
      }
      .situation_bottom {
        width: 49%;
        height: 48%;
        cursor: pointer;
        border-radius: 6px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .Num {
          font-size: 16px;
          font-weight: bold;
          /*   float: right; */
        }
        .title_tip {
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
  }
</style>
